<template>
	<!-- 我的-康复顾问-康复计划详情 -->
	<view class="content" v-if="!isedit">
		<view class="bg"></view>
		<view style="margin-top: 0rpx;z-index: 100;">
			<view class="info-content">
				<view class="info-item" style="border-bottom: 1rpx solid #E1E1E1;">
					<view>会员</view>
					<view class="name">{{baseFormData.memberName}}</view>
				</view>
				<view class="info-item" style="margin-bottom: -20rpx;">
					<view>康复周期</view>
				</view>
				<view class="info-item">
					<uni-datetime-picker v-model="datetimerange" type="daterange" rangeSeparator="至" />
				</view>
				<view class="info-item" style="margin-bottom: -20rpx;">
					<view>频次 (次/周)</view>
				</view>
				<view class="info-item" style="border-bottom: 1rpx solid #E1E1E1;">

					<uni-easyinput v-model="baseFormData.frequency" placeholder="请输入频次" :styles="{borderColor: '#fff'}" @change="setTime()"/>

				</view>
				<view>
					<view class="info-item" style="margin-bottom: -20rpx;">
						<view>康复每周课程时间</view>
					</view>
					<view class="info-item" style="margin-bottom: -20rpx;" v-for="(item,index) in datelist">
						<view style="width: 200rpx;">
							<uni-data-select v-model="item.weekNum" :localdata="rangedate" @change="change" :styles="{borderColor: '#fff'}"></uni-data-select>
						</view>


						<picker mode="time" :value="item.startHourTime" start="00:00" end="23:59" @change="bindTimeChange(item,$event)">
							<view class="uni-input">{{item.startHourTime}}</view>
						</picker>
						-
						<picker mode="time" :value="item.endHourTime" start="00:00" end="23:59" @change="bindTimeChange2(item,$event)">
							<view class="uni-input">{{item.endHourTime}}</view>
						</picker>
						<!-- <uni-datetime-picker v-model="item.datetimerange" type="datetimerange" rangeSeparator="至" /> -->
					</view>
				</view>

				<view class="info-item" style="margin-bottom: -20rpx;">
					<view>康复师</view>
				</view>
				<view class="info-item">
					<uni-data-select style="width:45%;" v-model="baseFormData.recureTeacherId" :localdata="teacherList" @change="change" :styles="{borderColor: '#fff'}"></uni-data-select>
				</view>
			</view>
		</view>
		<view class="btn" @click="edit()">修改</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: 0,
				baseFormData: {},
				datelist: [],
				teacherList: [],
				range: [{
						value: 0,
						text: "康复师1"
					},
					{
						value: 1,
						text: "康复师2"
					},
					{
						value: 2,
						text: "康复师3"
					},
				],
				rangedate: [{
						value: 1,
						text: "星期一"
					},
					{
						value: 2,
						text: "星期二"
					},
					{
						value: 3,
						text: "星期三"
					},
					{
						value: 4,
						text: "星期四"
					},
					{
						value: 5,
						text: "星期五"
					},
					{
						value: 6,
						text: "星期六"
					},
					{
						value: 7,
						text: "星期日"
					},

				],
				datetimerange: [] //康复周期
			}
		},
		onLoad(option) {
			this.id = option.id;
			this.getTeacherList();
			this.getPlanDetail(option.id);
		},
		methods: {
			setTime(){
				let a = []
				const frequency= this.baseFormData.frequency
				for (let i = 0; i < frequency; i++) {
					a.push({
						startHourTime: '00:00',
						endHourTime: "00:00",
						weekNum: "",
						recurePlanId: this.id
					})
				}
				this.datelist = a;
			},
			bindTimeChange(item, e) {
				item.startHourTime = e.detail.value
			},
			bindTimeChange2(item, e) {
				item.endHourTime = e.detail.value
			},
			change(item) {
				this.activeTab = item.title
			},
			getTeacherList() {
				let that = this;
				uni.request({
					url: "https://guokang365.mordo-care.com/api/recureTeacher/searchListAll",
					method: 'POST',
					//仅为示例，并非真实接口地址。
					header: {
						'Cookie': "JSESSIONID=" + getApp().globalData.serverSession
					},
					data: {
					},
					success: (res) => {
						// todo 入参是or
						if (res.data.result != '100') {
							// 获取会员统计数据失败，不确定是否要弹窗
						} else {
							// todo 展示列表
							that.teacherList = res.data.list.map(item => ({
								text: item.name,
								value: item.id
							}))
						}
					},
				});
			},
			getTextByValue(value) {
				const option = this.teacherList.find(item => item.value === value);
				return option ? option.text : '';
			},
			edit() {
				let that = this;
				let data = JSON.parse(JSON.stringify(that.baseFormData));
				data.recurePlanWeektimeList = that.datelist; //todo 当前级联更新报错
				// data.recurePlanWeektimeList = null;
				data.startDate = that.formatDate2(that.datetimerange[0]);
				data.endDate = that.formatDate2(that.datetimerange[1]);
				data.recureTeacherName = that.getTextByValue(data.recureTeacherId);

				uni.request({
					url: "https://guokang365.mordo-care.com/api/recurePlan/update/" + that.id,
					method: 'POST',
					//仅为示例，并非真实接口地址。
					data: data,
					header: {
						'Cookie': "JSESSIONID=" + getApp().globalData.serverSession
						// 'JSESSIONID': getApp().globalData.serverSession //自定义请求头信息
					},
					success: (res) => {
						// todo 需要使用级联查询，查套餐名
						if (res.data.result != '100') {
							uni.showModal({
								content: '修改失败',
								showCancel: false,
								buttonText: '确定',
							})

						} else {
							uni.showModal({
								content: '修改成功',
								showCancel: false,
								buttonText: '确定',
							})
							that.returnLastPage();
						}
					},
				});
			},
			returnLastPage() {
				//获取页面栈数据
				const pages = getCurrentPages()
				//当长度为1时，则是打开小程序时首先进来的页面，没有上一页
				if (pages.length <= 1) {
					// uni.switchTab({
					// 	url: '/pages/home/home'
					// })
				} else {
					//存上一页信息
					let prevPage = ''
					//存上一页完整路由
					let prevRoute = ''
					//pages的长度-2为上一页，pages最后一个元素则是当前页
					if (pages.length >= 2) {
						prevPage = pages[pages.length - 2]
						prevRoute = prevPage.route
					}
					//返回上一页并触发上一页的刷新方法，加个定时器的原因：降低返回时调用刷新函数失败几率
					setTimeout(() => {
						uni.navigateBack({
							delta: 1,
							success: (event) => {
								//判断是否为刷新数据的目标页
								if (prevRoute.indexOf('pages/my/rehabilitation-plan-list') > -1) {
									prevPage.$vm.reLoadFn()
								}
							}
						});
					}, 300)
				}
			},
			getPlanDetail(id) {
				let that = this;
				uni.request({
					url: "https://guokang365.mordo-care.com/api/recurePlan/findCascade/" + id,
					method: 'POST',
					//仅为示例，并非真实接口地址。
					header: {
						'Cookie': "JSESSIONID=" + getApp().globalData.serverSession
						// 'JSESSIONID': getApp().globalData.serverSession //自定义请求头信息
					},
					data: {
						"cascades": [{
							"column": "recurePlanWeektimeList",
						}],
					},
					success: (res) => {
						// todo 需要使用级联查询，查套餐名
						if (res.data.result != '100') {
							// 获取会员详情失败，不确定是否要弹窗
						} else {
							that.baseFormData = res.data.entity;
							let a = []
							a.push(that.formattedDate(res.data.entity.startDate));
							a.push(that.formattedDate(res.data.entity.endDate));
							that.datetimerange = a;
							setTimeout(() => {
								that.datelist = res.data.entity.recurePlanWeektimeList;
							}, 200)

						}
					},
				});
			},

			formattedDate(dateString) {
				// const year = dateString.substr(0, 4);
				// const month = dateString.substr(4, 2);
				// const day = dateString.substr(6, 2);
				// const date = new Date(year, month - 1, day); // 注意月份要减一
				// const formattedDate = `${date.getFullYear()}-${date.getMonth()+1}-${date.getDate()}`; // 格式化日期字符串
				const date = new Date(dateString.replace(/(\d{4})(\d{2})(\d{2})/, '$1-$2-$3'));
				const formattedDate = date.toLocaleDateString();
				return formattedDate;
			},
			formatDate2(dateString) {
				// 将日期字符串转换为 Date 对象
				const date = new Date(dateString);
				// 获取年、月、日的值，前面补零以保持两位数格式
				const year = date.getFullYear().toString();
				const month = (date.getMonth() + 1).toString().padStart(2, "0");
				const day = date.getDate().toString().padStart(2, "0");
				// 将处理后的年月日组合在一起并返回
				return year + month + day;

			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.bg {
		width: 750rpx;
		height: 128rpx;
		background: #CBFFDB;
		filter: blur(25px);
		position: absolute;
		z-index: 1;
		top: 0px;
	}

	.name {
		height: 97rpx;
		font-size: 29rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #42AE49;
		line-height: 97rpx;
	}

	.date {
		font-size: 29rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #D6D6D6;
		line-height: 97rpx;
	}

	.info-content {
		box-sizing: border-box;
		width: 707rpx;
		padding: 40rpx 34rpx;
		background: #FFFFFF;
		border-radius: 22rpx;
		margin-top: 50rpx;
		margin-bottom: 130rpx;
	}

	.info-item {
		justify-content: space-between;
		flex-direction: row;
		display: flex;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #393939;
		align-items: center;
		height: 100rpx;
	}

	.key {
		width: 460rpx;
	}

	.btn {
		position: fixed;
		bottom: 0rpx;
		text-align: center;
		width: 750rpx;
		height: 129rpx;
		background: #42AE49;
		font-size: 30rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 129rpx;
		z-index: 50;

	}

	.btn-cancel {
		width: 375rpx;
		height: 129rpx;
		background: #D1D1D1;
		font-size: 30rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #525252;
		line-height: 129rpx;
		text-align: center;
	}

	.btn-save {
		width: 375rpx;
		height: 129rpx;
		background: #42AE49;
		font-size: 30rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 120rpx;
		text-align: center;
	}
</style>